<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSONFORM</title>
<script language="javascript" src="./jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
	/*
		//全局Ajax设置
		$.ajaxSetup({
		url: "json.php",
		type:   "post"
		});
	*/	
   $('#ajax').click(function (){
	//序列化表单的值
	var params=$('input,select').serialize(); 
	$.ajax({
       url:"json.php", 		//后台处理程序
       type:"post",         //数据发送方式
       dataType:"json",     //返回数据格式
       data:params,         //要传递的参数
       success:update_page 	//成功回传函数
     });
   });
});

function update_page(json) //返回参数
{
	var str="昵称:"+json.uid+"<br />";
	str+="密码:"+json.pwd+"<br />";
	str+="性别:"+json.sex+"<br />";
	str+="checkbox:"+json.happy+"<br />";
	str+="checkbox:"+json.funny+"<br />";
	str+="select:"+json.cs1+"<br />";
	str+="select:"+json.cs2+"<br />";
	str+="select:"+json.cs3+"<br />";
	str+="追加:"+json.append;
	$("#result").html(str);
}

</script>

</head>

<body>
<div id="result" style="background:orange;"></div>
<form id="regForm" action="" method="post">
		昵称:<input type="text" name="uid" id="uid" /><br /><br />
		密码:<input type="password" name="pwd"  id="pwd"/><br /><br />
		性别:<input type="radio" name="sex" value="1" />男
			<input type="radio" name="sex" value="0" />女<br /><br />
		目的:<input type="checkbox" name="happy" value="happy" />开心
			<input  type="checkbox" name="funny" value="funny" />作乐<br /><br />
		<select name="cs1">
			<option value="dl1">大类1</option>
			<option value="dl2">大类2</option>
			<option value="dl3">大类3</option>						
		</select>  
		<select name="cs2">		
			<option value="dl1">大类1</option>
			<option value="dl2">大类2</option>
			<option value="dl3">大类3</option>						
		</select>
		<select name="cs3">		
			<option value="dl1">大类1</option>
			<option value="dl2">大类2</option>
			<option value="dl3">大类3</option>						
		</select>                  
</form>
<button id="ajax">提交</button>

		<!--
			Jump-Data
			<input type="submit" name="submit" id="send" value="submit" onclick="echo()" />
			<button name="submit" id="send" value="submit" onclick="echo()">确认</button>						
		-->
		<!--
			Can't Jump
			<input type="button" name="submit" id="send" value="submit" onclick="echo()" />
			Jump-Data But Cant't Get SubmitData
			<input type="image" name="submit" id="send" value="submit" src="images.jpg" onclick="echo()"/>
		-->

</body>
</html>
